import React, { Component } from "react";
import TheButton from "@/components/TheButton"
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheTableExtend from "@/components/TheTableExtend"
import { apiDeleteDoctor, apiDoctorPage, apiSwitchDoctor, apiSubscribeDatePage } from "../../../request/doctor";
import {Modal,Button} from "antd";

export default class List extends Component {
  constructor() {
    super()
    this.state = {
      columns: [
        {
          title: "医生姓名",
          dataIndex: "doctorName",
          key: "doctorName",
        },
        {
          title: "医生职称",
          dataIndex: "doctorTitle",
          key: "doctorTitle",
        },
        {
          title: "医生电话",
          dataIndex: "doctorMobile",
          key: "doctorMobile",
        },
        {
          title: "展示标签",
          dataIndex: "doctorTag",
          key: "doctorTag",
        },
        {
          title: "挂号价格",
          dataIndex: "doctorPrice",
          key: "doctorPrice",
          render: (text, record) => {
            return <React.$Price price={record.doctorPrice} />
          }
        },
        {
          title: "启用状态",
          dataIndex: "doctorStatus",
          key: "doctorStatus",
          render: (text, record) => {
            let status = ''
            switch (text) {
              case 'Y':
                status = '已启用'
                break
              case 'N':
                status = '未启用'
                break
              default:
                break
            }
            return status
          }
        },
        {
          title: "操作",
          render: (text, record) => {
            return (
              <>
                <TheButton hasPermi={['doctor:list:edit']} onClick={() => { this.props.history.push('/doctor/list/edit/' + record.doctorId) }}>编辑</TheButton>
                <TheButton hasPermi={['doctor:list:delete']} onClick={() => { this.deleteDoctor(record.doctorId) }}>删除</TheButton>
                {record.doctorStatus === 'Y' && <TheButton hasPermi={['doctor:list:disabled']} onClick={() => { this.onType(record.doctorId, record.doctorStatus) }}>禁用</TheButton>}
                {record.doctorStatus === 'N' && <TheButton hasPermi={['doctor:list:enabled']} onClick={() => { this.onType(record.doctorId, record.doctorStatus) }}>启用</TheButton>}
              </>
            )
          }
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: '',
      dateVisible: false,
      columnsDate: [
        {
          title: "星期",
          dataIndex: "week",
          key: "week",
          onCell: (_: any, index: any) => {
            return { rowSpan: _.rowSpan };
          },
          render: (text, record) => {
            let label = ''
            switch (text) {
              case 1:
                label = '周一'
                break;
              case 2:
                label = '周二'
                break;
              case 3:
                label = '周三'
                break;
              case 4:
                label = '周四'
                break;
              case 5:
                label = '周五'
                break;
              case 6:
                label = '周六'
                break;
              case 7:
                label = '周日'
                break;
              default:
                label = "字段值错误"
            }
            return label
          }
        },
        {
          title: "出诊医生",
          dataIndex: "doctorName",
          key: "doctorName",
          render: (text, record) => {
            return text??"-"
          }
        },
        {
          title: "出诊时间",
          dataIndex: "time",
          key: "time",
          render: (text, record) => {
            return (record.beginTime&&record.endTime)?record.beginTime + "~" + record.endTime:'-'
          }
        },
      ],
      dataSourceDate: []
    }
  }

  componentDidMount() {
    this.getData()
  }
  // 医生列表
  getData = async () => {
    let { pageData } = this.state
    let res = await apiDoctorPage({ ...pageData })
    if (res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  onType = (id, type) => {
    let data = ''
    if (type === 'Y') {
      data = '禁用'
    } else {
      data = '启用'
    }
    React.$confirm({
      title: `您确定${data}吗？`,
      onOk: async () => {
        let res = await apiSwitchDoctor({ id: id })
        console.log(res);
        if (res.code === 0) {
          this.getData()
        }
      }
    })
  }
  // 删除医生
  deleteDoctor = (id) => {
    React.$confirm({
      title: '您确定删除该名医生嘛？',
      onOk: async () => {
        let res = await apiDeleteDoctor(id)
        if (res.code === 0) {
          this.getData()
        }
      }
    })
  }
  // 分页
  handleTableChange = (page, pageSize) => {
    this.setState({
      pageData: {
        pageNo: page,
        pageSize
      }
    })
    this.getData()
  }
  // 函数-合并单元格
  changeData = (data: any, field: any) => {
    let count = 0;
    let indexCount = 1;
    try {
      while (indexCount < data.length) {
        let item = data.slice(count, count + 1)[0];
        if (!item.rowSpan) {
          item.rowSpan = 1;
        }
        if (item[field] === data[indexCount][field]) {
          item.rowSpan++;
          data[indexCount].rowSpan = 0;
        } else {
          count = indexCount;
        }
        indexCount++;
      }
    } catch {}
    return data;
  };

  openModal=()=>{
    apiSubscribeDatePage().then((res)=>{
      if (res.code === 0) {
        let data = this.changeData(res.data,'week')
        this.setState({
          dateVisible: true,
          dataSourceDate: data
        })
      }
    })
  }
  onCancel=()=>{
    this.setState({
      dateVisible: false,
    })
  }
  pageChange=(pageNo, pageSize)=>{
    this.setState({
      pageData: {
        pageNo,
        pageSize
      },
    },()=>{
      this.getData()
    })
  }
  render() {
    let { columns, columnsDate , dataSource, dataSourceDate , pageData, total, dateVisible} = this.state
    return (
      <>
        <div className="p-layout-box">
          <div style={{ marginBottom: '20px' }}>
            <TheButton size="middle" type="primary" hasPermi={['doctor:list:add']} onClick={() => { this.props.history.push('/doctor/list/add') }}>新增医生</TheButton>
            <TheButton size="middle" type="primary" onClick={() => { this.openModal()}}>查看排期</TheButton>
          </div>
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination pageNo={pageData.pageNo} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
          <Modal
              visible={dateVisible}
              title={'查看排期'}
              onCancel={this.onCancel}
              footer={[
                <Button key="back" onClick={this.onCancel}>
                  取消
                </Button>
              ]}
          >
            <TheTable
                columns={columnsDate}
                dataSource={dataSourceDate}
            >
            </TheTable>
          </Modal>
        </div>
      </>
    )
  }
}
